import { SVG } from '@svgdotjs/svg.js'
import { sizeConfig } from '../config/sizeConfig'
import { getDataURL } from '../utils'

/**
 * 创建上、左、右箭头图片
 * @param width 箭头三角形的宽度
 * @param height 箭头三角形的高度
 * @deprecated
 */
function initBlackArrowShape(width = 10, height = 8) {
    const color = 'currentColor'
    /* 三角形 */
    const arrowUpSvg = SVG().size(width, height)
    // 画一个向上的三角形
    arrowUpSvg
        .polygon([
            [width / 2, 0],
            [0, height],
            [width, height],
        ])
        .fill(color)
    const arrowRightSvg = SVG().size(height, width)
    // 画一个向右的三角形
    arrowRightSvg
        .polygon([
            [0, 0],
            [0, width],
            [height, width / 2],
        ])
        .fill(color)

    const arrowLeftSvg = SVG().size(height, width)
    // 画一个向左的三角形
    arrowLeftSvg
        .polygon([
            [0, width / 2],
            [height, width],
            [height, 0],
        ])
        .fill(color)

    /* 线条 */
    // 画一个纵向线条
    const verticalLine = SVG().size(width, height)
    verticalLine
        .line(width / 2, 0, width / 2, height)
        .stroke({ color: color, width: 1 })
    // 画一个横向线条
    const horizontalLine = SVG().size(height, width)
    horizontalLine
        .line(height, width / 2, 0, width / 2)
        .stroke({ color: color, width: 1 })

    /* 样式 */
    // 创建一个style标签，将dataURL写入
    const style = document.createElement('style')
    style.innerHTML = `
    .arrow {
        position: relative;
        width: ${width}px;
        height: ${height}px;
        background-position: left top;
    }

    .arrow-up,
    .arrow-dowm {
        background-image: url(${getDataURL(verticalLine)});
        background-repeat: repeat-y;
    }

    .arrow-right,
    .arrow-left {
        background-image: url(${getDataURL(horizontalLine)});
        background-repeat: repeat-x;
    }

    .arrow-up::before,
    .arrow-down::before,
    .arrow-right::before,
    .arrow-left::before {
        display: block;
        position: absolute;
        content: '';
        background-repeat: no-repeat;
        background-position: left top;
    }

    .arrow-up {
        margin-top: ${height}px;
    }

    .arrow-up::before {
        width: ${width}px;
        height: ${height}px;
        top: -${height}px;
        background-image: url(${getDataURL(arrowUpSvg)});
        
    }

    .arrow-right {
        margin-right: ${height}px;
    }

    .arrow-right::before {
        width: ${height}px;
        height: ${width}px;
        right: -${height}px;
        background-image: url(${getDataURL(arrowRightSvg)});
    }

    .arrow-left {
        margin-left: ${height}px;
    }

    .arrow-left::before {
        width: ${height}px;
        height: ${width}px;
        left: -${height}px;
        background-image: url(${getDataURL(arrowLeftSvg)});
    }
    `
    // 将style标签添加到head中
    document.head.appendChild(style)
}

/**
 * 创建上、左、右箭头图片
 * @param width 箭头三角形的宽度
 * @param height 箭头三角形的高度
 * @deprecated
 */
function initWhiteArrowShape(
    width = sizeConfig.bus.width * 2,
    height = 12,
    weight = sizeConfig.bus.width
) {
    /* 三角形 */
    const arrowUpSvg = SVG()

    const weightHelp = (width - weight) / 2
    // 画一个向上的三角形
    const polyline = arrowUpSvg
        .polyline([
            [weightHelp + weight + 1, height + 1],
            [width + 1, height + 1],
            [width / 2 + 1, 0 + 1],
            [0 + 1, height + 1],
            [weightHelp + 1, height + 1],
        ])
        .stroke({
            color: '#000',
            linejoin: 'arcs',
        })
        .fill('none')

    const realSize = [polyline.width() + 2, polyline.height() + 2]
    arrowUpSvg.size(realSize[0], realSize[1])

    /* 线条 */
    // 画一个纵向线条
    const verticalLine = SVG().size(width, height)
    verticalLine
        .line(weightHelp + weight + 1, 0, weightHelp + weight + 1, height)
        .stroke({ color: '#000', width: 1 })
    verticalLine
        .line(weightHelp + 1, 0, weightHelp + 1, height)
        .stroke({ color: '#000', width: 1 })
    // 创建一个style标签，将dataURL写入
    const style = document.createElement('style')
    style.innerHTML = `
    .arrow-up.arrow-white {
        width: ${realSize[0]}px;
        height: 20px;
        margin-top: ${realSize[1]}px;
        background-image: url(${getDataURL(verticalLine)});
    }
    .arrow-up.arrow-white::before {
        width: ${realSize[0]}px;
        height: ${realSize[1]}px;
        top: -${realSize[1] - 1}px;
        background-image: url(${getDataURL(arrowUpSvg)})
    }
    `
    // 将style标签添加到head中
    document.head.appendChild(style)
}

export function initArrowShape() {
    initBlackArrowShape()
    initWhiteArrowShape()
}
